vue小程序  <template>
    <view class="content">
        <van-nav-bar :title="scrolling? navBarTitle : '' " left-arrow @click-left="onClickLeft" id="navBarS">
        </van-nav-bar>

        <scroll-view class="scroll-content" scroll-y :lower-threshold="80" @scroll="scrollPage" show-scrollbar="false">
            <view class="scroll_wrapper">
                <view class="moneyBg">
                    <view class="text">{{ navBarTitle }}</view>
                </view>

                <view v-for="(item, index) in ebProductAttr" :key="index">
                    <view>{{ item.attrName }}</view>
                    <view
                        v-for="(single, ind) in item.ebProductAttrSecond"
                        :key="ind"
                        class="normal"
                        :class="{ cur_border: chooseSize == single.attrName || chooseColor == single.attrName, dis_border: single.disabled }"
                        @click="chooseProduct(item, single)"
                    >
                        {{ single.attrName }}
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
export default {
    components: { },
    data() {
        return {
            navBarTitle: '服务流程',
            ebProductAttr: [
                { 
                    id: 121,
                    pid: 0,
                    attrName: '颜色',
                    ebProductAttrSecond: [
                        {
                            "id": 125,
                            "pid": 121,
                            "attrName": "格物致知蓝咖"
                        },
                        {
                            "id": 124,
                            "pid": 121,
                            "attrName": "格物致知红色"
                        }
                    ]
                },
                {
                    "id ": 126,
                    "pid ": 0,
                    "attrName": "尺码",
                    "ebProductAttrSecond":[
                        {
                            "id":127,
                            "pid":126,
                            "attrName":"200 * 27cm"
                        },
                        {
                            "id":128,
                            "pid":126,
                            "attrName":"240 * 30cm"
                        }
                    ]
                }
            ],
            ebStoreProductAttrValue: [
                {
                    "id": 21,
                    "productId": 3,
                    "suk": "格物致知红色,200 * 27cm",
                    "stock": 0,
                    "sales": 0,
                    "price": 374.00,
                    "integral": 0.00,
                    "image": "crmebimage/public/maintain/2021/12/25/5486775d8cad4fd8adfc254d2e93857cn0wu5hq8f4.jpg",
                    "unique": null,
                    "cost": 100.00,
                    "barCode": "",
                    "otPrice": 412.00,
                    "weight": 0.50,
                    "volume": 0.00,
                    "brokerage": 0.00,
                    "brokerageTwo": 0.00,
                    "type": 0,
                    "quota": 0,
                    "quotaShow": 0,
                    "isDel": false,
                    "attrValue": null
                }, {
                    "id": 22,
                    "productId": 3,
                    "suk": "格物致知红色,240*30",
                    "stock": 677,
                    "sales": 1,
                    "price": 374.00,
                    "integral": 0.00,
                    "image": "crmebimage/public/maintain/2021/12/25/5486775d8cad4fd8adfc254d2e93857cn0wu5hq8f4.jpg",
                    "unique": null,
                    "cost": 100.00,
                    "barCode": "",
                    "otPrice": 412.00,
                    "weight": 0.50,
                    "volume": 0.00,
                    "brokerage": 0.00,
                    "brokerageTwo": 0.00,
                    "type": 0,
                    "quota": 0,
                    "quotaShow": 0,
                    "isDel": false,
                    "attrValue": null
                }, {
                    "id": 19,
                    "productId": 3,
                    "suk": "格物致知蓝咖,200*27cm",
                    "stock": 698,
                    "sales": 0,
                    "price": 374.00,
                    "integral": 0.00,
                    "image": "crmebimage/public/maintain/2021/12/25/5486775d8cad4fd8adfc254d2e93857cn0wu5hq8f4.jpg",
                    "unique": null,
                    "cost": 100.00,
                    "barCode": "",
                    "otPrice": 412.00,
                    "weight": 0.50,
                    "volume": 0.00,
                    "brokerage": 0.00,
                    "brokerageTwo": 0.00,
                    "type": 0,
                    "quota": 0,
                    "quotaShow": 0,
                    "isDel": false,
                    "attrValue": null
                }, {
                    "id": 20,
                    "productId": 3,
                    "suk": "格物致知蓝咖,240*30",
                    "stock": 366,
                    "sales": 0,
                    "price": 374.00,
                    "integral": 0.00,
                    "image": "crmebimage/public/maintain/2021/12/25/5486775d8cad4fd8adfc254d2e93857cn0wu5hq8f4.jpg",
                    "unique": null,
                    "cost": 100.00,
                    "barCode": "",
                    "otPrice": 412.00,
                    "weight": 0.50,
                    "volume": 0.00,
                    "brokerage": 0.00,
                    "brokerageTwo": 0.00,
                    "type": 0,
                    "quota": 0,
                    "quotaShow": 0,
                    "isDel": false,
                    "attrValue": null
                }
            ],

            ebStoreProductAttrRelationDTO: [
                {
                    "productId": 3,
                    "valueId": 19,
                    "specId": 125,
                    "specName": "格物致知蓝咖",
                    "specParentId": 121,
                    "specParentName": "颜色"
                },
                {
                    "productId": 3,
                    "valueId": 19,
                    "specId": 127,
                    "specName": "200*27cm",
                    "specParentId": 126,
                    "specParentName": "尺码"
                },
                {
                    "productId": 3,
                    "valueId": 20,
                    "specId": 125,
                    "specName": "格物致知蓝咖",
                    "specParentId": 121,
                    "specParentName": "颜色"
                },
                {
                    "productId": 3,
                    "valueId": 20,
                    "specId": 128,
                    "specName": "240*30cm",
                    "specParentId": 126,
                    "specParentName": "尺码"
                },
                {
                    "productId": 3,
                    "valueId": 21,
                    "specId": 124,
                    "specName": "格物致知红色",
                    "specParentId": 121,
                    "specParentName": "颜色"
                },
                {
                    "productId": 3,
                    "valueId": 21,
                    "specId": 127,
                    "specName": "200*27cm",
                    "specParentId": 126,
                    "specParentName": "尺码"
                },
                {
                    "productId": 3,
                    "valueId": 22,
                    "specId": 124,
                    "specName": "格物致知红色",
                    "specParentId": 121,
                    "specParentName": "颜色"
                },
                {
                    "productId": 3,
                    "valueId": 22,
                    "specId": 128,
                    "specName": "240*30cm",
                    "specParentId": 126,
                    "specParentName": "尺码"
                }
            ],
            chooseSize: '',
            chooseColor: ''
        }
    },
    onLoad(data) {
        
       
    },
    onReady () {
        this.ebProductAttr.forEach(single => {
            single.ebProductAttrSecond.forEach(every => {
                every.disabled = false
            })
        })

    },
    methods: {
        // 点击某个颜色或尺寸时
        chooseProduct(one, two) {
            if (one.attrName === '颜色') {
                this.chooseSize = two.attrName
            } else if (one.attrName === '尺码') {
                this.chooseColor = two.attrName
            }
            // console.log(this.chooseColor, this.chooseSize)
            this.ebProductAttr.forEach(single => {
                single.ebProductAttrSecond.forEach(every => {
                    every.disabled = false
                })
            })
            
            // 除非颜色和尺寸都选择了，否则不进行判断
            if (this.chooseSize && this.chooseColor) {
                this.ebStoreProductAttrValue.forEach(item => {
                    console.log(item, this.chooseColor, this.chooseSize)
                    if (item.suk.indexOf(this.chooseSize) !== -1 && item.suk.indexOf(this.chooseColor) !== -1 && item.stock == 0) {
                        this.ebProductAttr.forEach(single => {
                            single.ebProductAttrSecond.forEach(every => {
                                if (every.attrName === this.chooseSize || every.attrName === this.chooseColor) {
                                    every.disabled = true
                                }
                            })
                        })
                        this.$forceUpdate()
                    }
                })
            }
            
        },
        
        // 返回键
        onClickLeft () {
            uni.navigateBack()
        }
    }
}
</script>

<style scoped>
.content {
    background-color: #ffffff;
    display: flex;
    flex-direction:column;
    height:100vh;
    overflow:hidden;
    box-sizing: border-box;
}
.scroll-content {
    flex: 1;
    height: 1px;
}
.scroll_wrapper{
    padding-bottom: 200rpx;
}
.moneyBg{
    margin-top: 17px;
    margin-left: 24px;
    margin-right: 24px;
    display: flex;
    align-items: center;
}
.text{
    font-size: 30px;
    text-align: center;
    color: #111111;
    line-height: 30px;
}
.money{
    font-size: 20px;
    color: #111111;
    text-align: center;
    line-height: 20px;
    margin-left:19px;
}

.serviceStatus {
    padding-top: 55rpx;
    margin: 0rpx 48rpx;
}
.serviceStatusTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.serviceStatusTitle {
    font-size: 36rpx;
    line-height: 36rpx;
    text-align: left;
    color: #111111;
}

.act_more {
    line-height: 24rpx;
    vertical-align: middle;
    height: 24rpx;
    font-size: 24rpx;
    text-align: right;
    color: #666666;
}
.act_t {
    color: #888888;
    font-size: 24rpx;
    line-height: 24rpx;
    margin-right: 17rpx;
}

.act_Im {
    vertical-align: -2rpx;
}
.serviceStatusSteps{
    padding-top: 60rpx;
    padding-bottom: 77rpx;
}


::v-deep .van-nav-bar__left {
    width: 56px;
    height: 44px;
}

::v-deep #navBarS .van-icon {
    color: #242629 !important;
}
::v-deep .van-cell{
    padding-left: 0px !important;
    border-bottom: 1px solid #f9f9f9;
}


 .t16{
    margin-top: 16px;
 }


 .service-timeline {
/* //   margin-top: 40rpx; */
  padding-left: 30rpx;
}

.timeline-item {
  position: relative;
  margin-bottom: 78rpx;
}
/* // 左侧的点 */
.timeline-dot {
  position: absolute;
  left: -9rpx;
  top: 7rpx;
  width: 18rpx;
  height: 18rpx;
  border-radius: 50%;
  background-color: #d4d4d4;
}
/* // 左侧的竖线 */
.timeline-line {
  position: absolute;
  left:0px;
  top: 24rpx;
  bottom: 0;
  width: 2rpx;
  background-color: #ccc;
}
.timeline-line-active{
    background-color: #ff6023;
}
.active .timeline-dot {
  background-color: #ff6023;
}
.timeline-dot-active{
  background-color: #ff6023;
}
.timeline-content {
  margin-left: 30rpx;
}
.timeline-text{
    font-size: 28rpx;
    line-height: 28rpx;
    font-weight: bolder;
}
.timeline-text-active{
    color: #ff6023;
}
.timeline-desc{
    font-size: 24rpx;
    color: #111111;
    margin-top: 28rpx;
}
.timeline-time {
  color: #888888;
  font-size: 24rpx;
  line-height: 24rpx;
  margin-top: 28rpx;
}
.last-item.timeline-line {
  display: none;
}
.last-item-timeline-line{
    height: 0rpx;
    display: none !important;
}
::v-deep .desc-class{
    font-size: 24rpx !important;
    line-height: 24rpx;
    text-align: left;
    color: #111111 !important;
}
.normal {
    display:inline-block;width:140px;height:40px;line-height:40px;margin:10px;border: 1px solid #ccc;text-align: center;
}
.cur_border {
    border-color: #ff6023;
    /* color: #000; */
}
.dis_border {
    position: relative;
    border-color: #ccc;
    color: gray;
}
.dis_border::before {
    content: "缺货";
    position: absolute;
    width: 40px;
    height: 20px;
    background: #fff;
    top: -20px;
    right: -10px;
    font-size: 10px;
}
</style>
